<!DOCTYPE html>
<html lang="en" style="font-size：13.333333vw;">

<head>
    <meta charset="UTF-8">
    <title>WEYSUV预约试驾</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link type="text/css" rel="stylesheet" href="./css/main.css" />
    <link type="text/css" rel="stylesheet" href="./css/swiper.min.css" />
    <link type="text/css" rel="stylesheet" href="./css/animate.css" />
    <link type="text/css" rel="stylesheet" href="./css/toast.css" />
    <script src="./js/jquery.min.js" type="text/javascript"></script>
    <!-- <script src="./js/vconsole.min.js" type="text/javascript"></script> -->
    <script src="./js/toast.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="./js/vue.min.js" type="text/javascript"></script>
    <script src="./js/swiper.min.js" type="text/javascript"></script>
    <script src="./js/main.js" type="text/javascript"></script>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container" id="swiper_index">
        <div class="swiper-wrapper">
            <!-- index -->
            <div class="swiper-slide">
                <div class="swpage-1" style="background-image: url(./img/index001.jpg);">
                    <div class="mor"><img style="width: 100px;" src="./img/mor.png"></div>
                    <div class="sw1-body">

                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swpage-1">
                    <div class="mor"><img style="width: 30px;" src="./img/mor2.png"></div>
                    <div class="sw-body-1" style="height: 100%;">
                        <div style="height: 69%; margin: 0; background:url(./img/index002.jpg) no-repeat center bottom; background-size: 100% auto;"></div>
                        <div>
                            <span>我们敢于不惜一切代价，将一切推倒重来，只为比安全更安全。不容半分妥协，拒绝丝毫马虎，是规则，也是原则</span>
                            <a class="sw-btn" onclick="openModal('modal_1')">进一步了解</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swpage-1" style="height: 100%;">
                    <div style="margin: 0; height: 100%;">
                        <div style="height: 69%; margin: 0; background:url(./img/index00301.jpg) no-repeat center top; background-size: auto 116%;"></div>
                        <div>
                            <img style="width: 100%;" src="./img/index00302.jpg">
                        </div>
                    </div>
                    <div class="sw-open" onclick="openModal('modal_2')" style="    
                        width: 121px;
                        height: 97px;
                        left: 13px;
                        bottom: 12px;
                    "></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swpage-1" style="background-image: url(./img/index004.jpg);">
                    <div class="mor"><img style="width: 30px;" src="./img/mor3.png"></div>
                    <div class="sw-open" onclick="openModal('modal_3')" style="    
                        width: 121px;
                        height: 50px;
                        right: 9px;
                        top: 137px;
                    "></div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swpage-1">
                    <div class="sw-body-1 sw-body-4">
                        <img src="./img/index005.jpg">
                        <div>
                            <span>为顾客提供更安全健康的驾舱环境。</span>
                            <div class="body-btn">
                                <a class="sw-btn" onclick="openModal('modal_41')">澎湃动力</a>
                                <a class="sw-btn" onclick="openModal('modal_42')">智能驾舱</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-pagination"></div> -->
    </div>
    <!-- 预约 -->
    <div class="tell" onclick="openModal('modal_sj')"><img src="./img/tell.png"></div>


    <!-- 轮播1 -->
    <div class="m-modal" id="modal_1">
        <div class="modal-close"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw101.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw102.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw103.jpg">
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- 轮播2 -->
    <div class="m-modal" id="modal_2">
        <div class="modal-close"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw201.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw202.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw203.jpg">
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- 轮播3 -->
    <div class="m-modal" id="modal_3">
        <div class="modal-close"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw301.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw302.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw303.jpg">
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- 轮播41 -->
    <div class="m-modal" id="modal_41">
        <div class="modal-close"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw411.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw412.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw413.jpg">
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- 轮播42 -->
    <div class="m-modal" id="modal_42">
        <div class="modal-close"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw421.jpg">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div style="overflow-y: auto; height: 100%;">
                        <img style="width: 100%;" src="./img/sw422.jpg">
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <!-- 法律声明 -->
    <div class="m-modal" id="modal_fl" style="background-color: #000;">
        <div class="modal-close2" onclick="openModal('modal_sj')" style="top: auto; bottom: 10px; left: 50%; margin-left: -20px; background-image: url(./img/close2.png)"></div>
        <div class="modal-body-fl">
            <h3>个人信息保护法律声明</h3>
            <p>感谢您对中国SUV领导者WEY品牌的关注以及对本网站的友好访问。长城汽车股份有限公司徐水魏派分公司（“WEY品牌”或“我们”），作为本网站的所有人，特此发布本声明如下，提醒您仔细阅读。</p>
            <h4>个人信息的范围</h4>
            <p>我们向您收集的个人信息系能够单独或者与其他信息结合识别您的个人身份的信息，包括但不限于您的姓名、性别、年龄、出生日期、身份证号、住址、联系方式、爱好、职业、紧急联系人、相关账号、使用我们的服务的时间和地点等个人信息（“个人信息”）。该等信息均是您自愿提供的。</p>
            <h4>个人信息收集和处理</h4>
            <p>我们收集您的个人信息的最终目的是为了向您提供更好的产品、服务，优化并丰富您的用户体验，具体收集方式或渠道包括但不限于：</p>
            <i>&nbsp;</i>
            <p>□会员登记</p>
            <p>□网站注册</p>
            <p>□调查问卷</p>
            <p>□售后跟踪和回访</p>
            <p>□就有关产品或服务征求意见和建议</p>
            <p>□举办活动并征集参加者</p>
            <i>&nbsp;</i>
            <p>您有权拒绝提供个人信息。但如果您拒绝提供某些个人信息，您将可能无法使用我们的产品、服务，或者可能对您使用产品或服务造成一定的影响。</p>
            <h4>个人信息使用和披露</h4>
            <p>（1）您同意，我们可以通过以下方式对个人信息进行使用和披露</p>
            <p>(包含对于个人信息的存储和处理) ：</p>
            <p>&nbsp;（a）我们（含分支机构）自行使用；</p>
            <p>&nbsp;（b）我们向关联公司披露并由其使用；</p>
            <p>&nbsp;（c）在各自的业务范围内，我们向受让人或继承人、法律及财务顾问、外部服务供应商、承包商 / 代理人 / 经纪人、信用资料或备资机构、收账代理人披露并由其使用。</p>
            <p>（2）   我们可能定期或不定期向您发送有关产品和服务的信息以及相关活动信息，您同意接收上述信息。</p>
            <p>（3）   在下列情况下或为下列目的之一，我们可能将个人信息提供给第三方：</p>
            <p>&nbsp;&nbsp;&nbsp;-　 经过您的特别授权；</p>
            <p>&nbsp;&nbsp;&nbsp;- 　满足相关法律规定或满足政府机关（包括司法机关）的强制性要求；</p>
            <p>&nbsp;&nbsp;&nbsp;-  执行适用的服务条款（包括调查可能存在的违规情况）；</p>
            <p>&nbsp;&nbsp;&nbsp;-  查找、预防或处理欺诈、安全或技术方面的问题；</p>
            <p>&nbsp;&nbsp;&nbsp;-  在法律要求或允许的范围内，保护用户或公众的权利、财产或安全免遭损害；</p>
            <p>&nbsp;&nbsp;&nbsp;-  在紧急情况下，向您的紧急联系人披露并由其使用。</p>
            <p>（4）   个人信息的传输、存储方式包含电子方式，相应信息接受和或使用方法及其服务器可能位于中国境内或者境外。</p>
            <p>（5）   我们将严格保护您的个人信息安全。我们将采用适当制度、安全技术和程序等措施来保护您的个人信息不被未经授权的访问、使用或泄漏。我们亦将促使本法律声明所述各接收和使用方尽力保护和不予泄露您的个人信息。</p>
            <p>（6）   您同意免除上述个人信息的接受和 / 或使用方在按照本法律声明所述情形下进行信息披露和使用而导致的或可能导致的所有索赔、责任和损失，除非上述索赔、责任和损失直接因该等接收和 / 或使用方的故意行为或重大过失造成。</p>
            <p>（7）   我们保留您的个人信息的时间，将不会超过为该等信息的预定使用目的而必需的时间，或任何合同或相关法律所规定的时间。</p>
            <h4>适用法律</h4>
            <p>本声明适用中华人民共和国法律。</p>
            <p>如果您需要查询、修改或更正您的个人信息，或对个人信息保护问题有任何疑问或投诉，您可以拨打400 - 666 - 6616联系我们。"</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </div>
    </div>

    <!-- 预约试驾 -->
    <div class="m-modal" id="modal_sj" style=" overflow-y: auto; z-index: 101; background-image: url(./img/sj.jpg); background-size: 100% auto; background-color: #000;">
        <div class="modal-close" onclick="modalClose();" style="background-image: url(./img/close2.png)"></div>
        <div class="modal-body-sj">
            <div>
                <div class="one">
                    <select>
                        <option>新款VV6</option>
                    </select>
                </div>
                <div class="one" style="margin-right: 12px;">
                    <input type="text" v-model="form.name" v-on:change="verifyForm()" v-bind:class="{ error: verify.name.includes('name') }" placeholder="姓名">
                </div>
                <div class="one" style="margin-right: 12px;">
                    <input type="tel" v-model="form.phone" maxlength="11" v-on:change="verifyForm()" v-bind:class="{ error: verify.name.includes('phone') }" placeholder="手机">
                </div>
                <div class="one">
                    <select v-model="form.province" v-on:change="provinceChange(form.province);verifyForm();" v-bind:class="{ error: verify.name.includes('province') }">
                        <option value="选择省份">选择省份</option>
                        <option v-for="item in provinceItems" v-model="item.sh_province">{{item.sh_province}}</option>
                    </select>
                </div>
                <div class="one">
                    <select v-model="form.city" v-on:change="cityChange(form.city);verifyForm()" v-bind:class="{ error: verify.name.includes('city') }">
                        <option value="选择城市">选择城市</option>
                        <option v-for="item in cityItems" v-model="item.sh_city">{{item.sh_city}}</option>
                    </select>
                </div>
                <div class="one">
                    <select v-model="form.dealer" v-on:change="verifyForm()" v-bind:class="{ error: verify.name.includes('dealer') }">
                        <option value="选择经销商">选择经销商</option>
                        <option v-for="item in dealerItems" v-model="item.sh_serviceStoreName">{{item.sh_serviceStoreName}}</option>
                    </select>
                </div>
                <div>
                    <label style="position: relative;">
                        <input v-model="checkbox" style="position: absolute; left: 0; top: 0; width: 0;height: 0; opacity: 0;" type="checkbox">
                        <img v-if="checkbox" src="./img/checkbox1.png">
                        <img v-else src="./img/checkbox2.png">
                        <span>我已经阅读并接受个人信息保护</span>
                    </label>
                    <a onclick="openModal('modal_fl')">法律声明</a>
                </div>
                <div class="btn">
                    <span v-on:click="send" class="sw-btn">立即预约</span>
                </div>
            </div>
        </div>
    </div>

    <div id="jalertDemo"></div>

    

    <script>
        //
        var swiper = new Swiper('#swiper_index', {
            direction: 'vertical',
            pagination: {
                el: '#swiper_index .swiper-pagination',
                clickable: true,
            },
        });

        var swiper2 = new Swiper('.m-modal .swiper-container', {
            pagination: {
                el: '.m-modal .swiper-pagination',
            },
        });
        

        //  open
        var openModal = function (id) {
            $('.m-modal').css({top: '-10000px', left: '-10000px'});
            $('#' + id).css({top: '0px', left: '0px'});
            if (id === 'modal_sj') {
                $('#' + id).css({position: 'relative'});
                $('#swiper_index').css({position: 'absolute', top: '-10000px', left: '-10000px'});
            }
        }
        // openModal('modal_sj');

        // close
        var modalClose = function () {
            $('.m-modal').css({top: '-10000px', left: '-10000px'});
            $('#swiper_index').css({position: 'fixed', top: '0px', left: '0px'});
            $('#modal_sj').css({position: 'fixed'});
        }
        $('.modal-close').on('click', function () {
            modalClose();
        });
        
    </script>


<!-- 表单 -->
<script>
    var vm = new Vue({
        el: '#modal_sj',
        data: {
            form: {
                name: '',
                phone: '',
                province: '选择省份',
                city: '选择城市',
                dealer: '选择经销商'
            },
            checkbox: true,
            provinceItems: [],
            cityItems: [],
            dealerItems: [],
            verify: {
                name: [],
                msg: ''
            }
        },
        mounted: function () {
            var that = this;
            //  初始化
            that.getProvince().then(function () {
                $.get('https://xcx.xyz.sc.naiping520.cn').then(function (res) {
                    if ('region' in res) {
                        //  省
                        var item = that.provinceItems.find(item => item.sh_province.indexOf(res.region) >= 0 ||  res.region.indexOf(item.sh_province) >= 0);
                        if (item) {
                            that.form.province = item.sh_province;
                            //  市
                            that.getCity(res.region).then(function (res1) {
                                if (res1.length > 0) {
                                    var cityItem = that.cityItems.find(item => item.sh_city.indexOf(res.city) >= 0 ||  res.city.indexOf(item.sh_city) >= 0);
                                    !cityItem && (cityItem = that.cityItems[0]);
                                    that.form.city = cityItem.sh_city;
                                    //  经销商
                                    that.getDealer(that.form.city).then(function (res2) {
                                        if (res2.length > 0) {
                                            that.form.dealer = res2[0].sh_serviceStoreName;
                                        }
                                    });
                                } else {
                                    if (that.cityItems.length > 0) {
                                        that.form.city = that.cityItems[0].sh_city;
                                    } else {
                                        that.form.city = '选择城市';
                                    }
                                }
                                
                                if (cityItem) {
                                    
                                } else {
                                    
                                }
                            });
                        }
                    } else {

                    }
                });
            });
        },
        methods: {
            send: function() {
                var that = this;
                //  验证
                var vf = this.verifyForm();
                if (!vf) {
                    //  提示
                    showMessage(this.verify.msg);
                    return false;
                } 
                //  提交
                $.post('https://wey.hiei.xin/api/vv6', this.form).then(function (res) {
                    res = JSON.parse(res);
                    if (res.code === 1) {
                        //  提交成功
                        showMessage('预约成功');
                        //  清空
                        that.form.name = '';
                        that.form.phone = '';
                    } else {
                        var msg = res.msg;
                        showMessage(msg || '预约失败');
                    }
                    console.log(res);
                });
                console.log(this.form);
            },
            // 省
            getProvince () {
                var that = this;
                return $.get('https://www.wey.com/index.php?m=tiyan&c=index&a=province2').then(function (res) {
                    that.provinceItems = JSON.parse(res);
                    return that.provinceItems;
                });
            },
            // 市
            getCity (province) {
                var that = this;
                return $.get('https://www.wey.com/index.php?m=tiyan&c=index&a=city2&b=' + province).then(function (res) {
                    that.cityItems = JSON.parse(res);
                    return that.cityItems;
                });
            },
            // 经销商
            getDealer (city) {
                var that = this;
                return $.get('https://www.wey.com/index.php?m=tiyan&c=index&a=distributor2&b=' + city).then(function (res) {
                    that.dealerItems = JSON.parse(res);
                    return that.dealerItems;
                });
            },
            provinceChange (province) {
                var that = this;
                if (province !== '选择省份') {
                    that.getCity(province).then(function () {
                        that.form.city = that.cityItems[0] ? that.cityItems[0].sh_city : '选择城市';
                        that.getDealer(that.form.city).then(function () {
                            that.form.dealer = that.dealerItems[0] ? that.dealerItems[0].sh_serviceStoreName : '选择经销商';
                        });
                    });
                } else {
                    that.cityItems = [];
                    that.form.city = '选择城市';
                    that.dealerItems = [];
                    that.form.dealer = '选择经销商';
                }
            },
            cityChange (city) {
                var that = this;
                if (city !== '选择城市') {
                    that.getDealer(city).then(function () {
                        that.form.dealer = that.dealerItems[0].sh_serviceStoreName;
                    });
                } else {
                    this.form.city = '选择城市';
                    that.dealerItems = [];
                    that.form.dealer = '选择经销商';
                }
            },
            verifyForm () {
                this.verify.name = [];
                this.verify.msg = '';
                if (!this.checkbox) {
                    this.verify.name = [...this.verify.name, 'checkbox'];
                    this.verify.msg = '请您阅读并接受个人信息保护法律声明';
                }
                if ((this.dealerItems.length > 0 && /选择经销商/.test(this.form.dealer))) {
                    this.verify.name = [...this.verify.name, 'dealer'];
                    this.verify.msg = '请选择经销商';
                }
                if ((/选择城市/.test(this.form.city))) {
                    this.verify.name = [...this.verify.name, 'city'];
                    this.verify.msg = '请选择城市';
                }
                if ((/选择省份/.test(this.form.province))) {
                    this.verify.name = [...this.verify.name, 'province'];
                    this.verify.msg = '请选择省份';
                }
                if (!(/^1\d{10}$/.test(this.form.phone))) {
                    this.verify.name = [...this.verify.name, 'phone'];
                    this.verify.msg = '手机格式错误';
                }
                if (!(this.form.name.length > 0)) {
                    this.verify.name = [...this.verify.name, 'name'];
                    this.verify.msg = '姓名不能为空';
                }
                if (this.verify.name.length > 0) {
                    return false;
                }
                return true;
            }
        }
    });
</script>
</body>


</html>